<template>
  <div style="width: 100%; height: 100%; position: relative">
    <div id="pieEcharts" style="width: 100%; height: 100%"></div>
    <div class="month-box">
      <a-select
        size="small"
        v-model="dates"
        style="width: 80px"
        @change="handleChange"
      >
        <a-select-option value="上一月"> 上一月 </a-select-option>
        <a-select-option value="本月"> 本月 </a-select-option>
        <a-select-option value="下一月"> 下一月 </a-select-option>
      </a-select>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dates: ["本月"],
      date: "",
      // myChart:{}
      options: {
        tooltip: {
          trigger: "item",
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          top: "20%",
          right: "3%",
          itemWidth: 14,
          itemHeight: 14,
          itemGap: 15,
        },
        color: [
          "#8378EA",
          "#37A2DA",
          "#32C5E9",
          "#9FE6B8",
          "#FFDB5C",
          "#FF9F7F",
          "#FB7293",
          "#E7BCF3",
        ],
        series: [
          {
            center: ["35%", "55%"],
            name: "访问来源",
            type: "pie",
            radius: ["30%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "24",
                fontWeight: "900",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "分类1" },
              { value: 735, name: "分类2" },
              { value: 580, name: "分类3" },
              { value: 484, name: "分类4" },
              { value: 300, name: "分类5" },
              { value: 1048, name: "分类6" },
              { value: 735, name: "分类7" },
              { value: 580, name: "分类8" },
            ],
          },
        ],
      },
    };
  },
  mounted() {
    let _this = this;
    let myChart = _this.$echarts.init(document.getElementById("pieEcharts"));
    let time;
    this.$nextTick(function () {
      time = setTimeout(() => {
        myChart.resize();
      }, 0);
      myChart.setOption(this.options);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    });
    clearTimeout(time);
  },
  methods: {
    handleChange(val, option) {
      console.log(val, option);
    },
  },
};
</script>

<style lang="less" scoped>
.month-box {
  z-index: 1000;
  position: absolute;
  top: 5px;
  right: 0;
  font-size: 14px !important;
}
</style>
